<template>
<van-row class="login">
    <van-col span="24" class="login-titel">
      <h2>登录</h2>
    </van-col>
    <van-col span="24">
      <div class="formDiv">
        <input size="28" :change="form.account.length > 7 && form.password.length > 7 ? login.dis = false : login.dis = true" @focus="accEmpty(true)" @blur="accEmpty(false)"  v-model="form.account" type="text" class="enabled text-info" :placeholder="accHolder" />
        <label :class="{focuslabel:active1}" id="testmy">账号</label>
      </div>
      <div class="formDiv">
        <input size="28" @focus="passEmpty(true)" @blur="passEmpty(false)" type="password" v-model="form.password" :placeholder="passHolder" class="enabled text-info" />
        <label :class="{focuslabel:active2}" for="dynamic-label-input">密码</label>
      </div>
  </van-col>
    <!-- <van-col span="12">
      <van-checkbox v-model="form.Rememb">记住密码</van-checkbox>
    </van-col> -->
    <van-col span="12">
      <van-checkbox @change="autologin" v-model="form.autocheck">自动登录</van-checkbox>
    </van-col>

  <van-col span="24" class="loginbutton">
    <x-button :disabled='login.dis' :show-loading='login.loading' @click.native="tologin" class="login_button" type="primary">登录</x-button>
  </van-col>
    <van-col span="24" class="link">
      <router-link :to="{ name: 'Register', params: {} }">
        账号注册
      </router-link>
      |
      <router-link :to="{ name: 'Forget', params: {} }">
        忘记密码
      </router-link>
    </van-col>
    <van-col span="24" class="agreement">
      登录即代表您同意我们的<a>用户服务协议</a>
    </van-col>
  <div v-transfer-dom>
    <toast :time='1000' :is-show-mask='true' :type='login.tipType' v-model="login.show">{{login.tip}}</toast>
  </div>
</van-row>
</template>

<script>
import router from '@/router'
import { TransferDom, XInput, Toast, XButton, cookie } from 'vux'
export default {
  name: 'Login',
  directives: {
    TransferDom
  },
  data() {
    return {
      accHolder: '账号',
      passHolder: '密码',
      active1: false,
      active2: false,
      form: {
        autocheck: false,
        account: '',
        password: ''
      },
      login: {
        show: false,
        tipType: '',
        loading: false,
        dis: true
      }
    }
  },
  mounted: function() {
    this.loginHandle(), this.accEmpty(false), this.passEmpty(false)
  },
  methods: {
    log(text) {
      console.log(`text:${text}`)
    },
    loginHandle() {
      const autoLogin = cookie.get('autoLogin')
      const account = cookie.get('account', function(s) { return String(s) })
      const password = cookie.get('password', function(s) { return String(s) })
      this.log(account)
      if (autoLogin == 'true') {
        this.form.account = account
        this.form.password = password
        this.form.autocheck = true
        this.tologin()
      } else if (autoLogin == 'false') {
        this.form.account = account
        this.form.password = password
      }
    },
    setCookie() {
      cookie.set('autoLogin', this.form.autocheck)
      cookie.set('account', this.form.account)
      cookie.set('password', this.form.password)
    },
    accEmpty(bool) {
      if (bool === false) {
        if (this.form.account.length === 0) {
          this.accHolder = '账号'
          this.active1 = false
        } else {
          this.accHolder = ''
          this.active1 = true
        }
      } else if (bool === true) {
        this.active1 = true
        this.accHolder = ''
      }
    },
    passEmpty(bool) {
      if (bool === false) {
        if (this.form.password.length === 0) {
          this.passHolder = '密码'
          this.active2 = false
        } else {
          this.passHolder = ''
          this.active2 = true
        }
      } else if (bool === true) {
        this.active2 = true
        this.passHolder = ''
      }
    },
    toast_login(type, text) {
      this.login.show = true
      this.login.tipType = type
      this.login.tip = text
    },
    tologin() {
      this.login.loading = true
      this.$post(
        '/user/login',
        {
          account: this.form.account,
          password: this.form.password
        },
        '请求失败'
      ).then(res => {
        if (res.data.code == 100) {
          this.toast_login('success', res.data.msg)
          this.setCookie()
          this.$store.state.isLogin = true
          router.push({ name: 'Home' })
        } else if (res.data.code == -1) {
          this.toast_login('warn', res.data.msg)
          console.log(res.data)
        } else if (res.data.code == 0) {
          this.toast_login('cancel', res.data.msg)
          console.log(res.data)
        }
      })
      this.login.loading = false
    },
    autologin() {
      this.form.autocheck == true
        ? (this.form.Rememb = true)
        : (this.form.autocheck = false)
    }
  },
  components: {
    Toast,
    XButton,
    TransferDom,
    XInput,
    cookie
  }
}
</script>
<style scoped>
.login{
  text-align:center;
  font-size:18px;
}
.login-titel{
  padding:60px;
}
.formDiv{
  height: 40px;
  position: relative;
  margin-top: 40px;
  margin-bottom:30px;
}
.loginbutton{
  padding: 0 13%;
  margin:20px 0;
}
.agreement{
  margin:60px 0;
}
a  {
  color:#26a2ff;
}

label {
  position: absolute;
  top: -70px;
  left: 65px;
  font-size: 18px;
  opacity: 0;
  transform: translate(15px,60px);
  transition: all 0.2s ease-in;
}
.blurlabel {
  opacity: 0;
  transform: translateY(1rem);
}
.focuslabel {
  /* background:#FF0000; */
  opacity: 1;
  transform: translateY(1rem);
}
.enabled{
  border: none;
  padding: 2px 12px;
  font-size: 18px;
  text-indent: 25px;
  line-height: 1.5;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  outline: none;
  box-shadow:0px 0px 0px 0px;
}
input[type="text"]:focus,
input[type="password"]:focus {
  border-bottom: 1.5px solid #26a2ff;
}
</style>
